<template>
    <div class="common-layout">
       <el-container>
           <el-header class="header_activate">
                <h1>导学案/课件审核</h1>
               <div class="search_activate" id="top_position"> 
                   <el-input v-model="state.input_user" placeholder="请输入手机/真名/导学案标题" />
                   <el-button type="warning" :icon="Search" @click="searchUserApplicationHandle"></el-button> 
               </div>
               <div class="filter">
                   <el-dropdown @command="handleCommand">
                       <span class="el-dropdown-link">
                           时间筛选
                       <el-icon class="el-icon--right">
                           <arrow-down />
                       </el-icon>
                       </span>
                       <template #dropdown>
                       <el-dropdown-menu>
                            <el-dropdown-item command="0" >不限</el-dropdown-item>
                           <el-dropdown-item command="7">近7天</el-dropdown-item>
                           <el-dropdown-item command="15">近15天</el-dropdown-item>
                           <el-dropdown-item command="30">近30天</el-dropdown-item>
                           <el-dropdown-item command="90" disabled>近90天</el-dropdown-item>
                           <el-dropdown-item command="180" divided>近半年</el-dropdown-item>                           
                       </el-dropdown-menu>
                       </template>
                   </el-dropdown>
               </div>
           </el-header>
           <el-divider />
           <el-main>
                <div>
                    <el-form label-width="100px">
                        <el-form-item label="拒绝理由">
                            <el-input 
                            autosize 
                            show-word-limit 
                            v-model="state.reject_reason"                        
                            minlength="10"
                            maxlength="50"
                            />
                        </el-form-item>
                    </el-form>
                </div>
                
               <el-table class="tableClass" :data="state.applicationList" stripe                   
                   :header-cell-style="{ background: '#eef1f6', color: '#606266' }"                    
                    border
               > 
                   <el-table-column type="index" width="45" label="序" />
                   <el-table-column width="80" property="user_info.real_name" label="姓名" />
                   <el-table-column width="120" property="user_info.phone" label="手机" />                           
                   <el-table-column width="150" property="paper_info.title" label="标题" show-overflow-tooltip />
                   <el-table-column width="150" property="paper_info.remark" label="说明" show-overflow-tooltip />
                   <el-table-column width="70" label="浏览"> 
                        <template #default="scope"> 
                            <el-button size="small" type="primary" @click="viewPaperClick(scope.row.file)">详</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column width="80" property="paper_info.open_level_cn" label="公开"/>
                    <el-table-column width="80" property="paper_info.online_cn" label="上/下线"/>  
                   <el-table-column width="115" property="add_date" label="日期"/>                 
                   <el-table-column width="95" property="status_info.name" label="处理结果"/>
                   <el-table-column align="center" width="90" label="操作" >                        
                       <template #default="scope"> 
                           <el-tooltip
                           class="box-item"
                           effect="dark"
                           content="上线"
                           placement="top"
                           >
                               <el-icon style="width: 1em; height: 1em; margin-right: 10px" @click="handleAgree(scope.$index)">
                                   <Select />
                               </el-icon>
                           </el-tooltip>
                           <el-tooltip
                           class="box-item"
                           effect="light"
                           content="下线"
                           placement="top"
                           >
                               <CloseBold style="width: 1em; height: 1em;" @click="handleReject(scope.$index)" />
                           </el-tooltip>
                       </template>
                   </el-table-column>
               </el-table>
               <!-- <el-pagination background layout="prev, pager, next" :total="1000" /> -->
               <el-pagination
               background
               layout="total, pre, pager, next"
               :total="state.total"                
               :page-size="state.pageSize"            
               @current-change="handleCurrentChange"
               />
           </el-main>
           <ShowGuidePaperFileDialog ref="showGuidePaperFileDialog" :file="state.file"></ShowGuidePaperFileDialog>
       </el-container>
   </div>
</template>
 
<script setup>
import { Search, Document, ArrowDown, Select, CloseBold } from '@element-plus/icons-vue'
import {onMounted,  reactive, toRefs, ref } from 'vue'
import { ElMessage } from 'element-plus'
import axios from '@/utils/axios'
import config from '~/config'
import ShowGuidePaperFileDialog from '@/components/ShowGuidePaperFileDialog.vue'
const showGuidePaperFileDialog = ref(null)

const state = reactive({
    reject_reason:'',
   input_user: '',
   days: 0,
   applicationList: [],
   total: 0, // 总条数
   currentPage: 1, // 当前页
   pageSize: 10, // 分页大小
   lastGetApplicationsMethod: 'default',
   paperquestionList:[]
})
//点击浏览导学案/课件文件的按钮事件处理
const viewPaperClick=(file)=>{     
    file = config[import.meta.env.MODE].baseUrl_noapi + file
    console.log("file", file)
    showGuidePaperFileDialog.value.open(file)
}
// 默认方式获取申请单
const getApplicationsByDefault=()=>{
   let params = {     
       days: state.days,
       page: state.currentPage,
       size: state.size,
   }
   state.lastGetApplicationsMethod = 'default'
   axios.get(`/GuidePaperApplicationModelViewSet/`, {params}).then(res => {
       if (res.code==200){
           console.log("申请列表：", res)
           state.applicationList = res.data.results
           state.total = res.total
       }else{       
           console.log("error", res.message)
       }
   })
   .catch((error)=>{
       console.log("昵称修改错误：", error)
   })
}
const getApplicationsBySearch=()=>{
   let params = { 
        query_key: state.input_user,
       page: state.currentPage,
       size: state.size,
   }
   state.lastGetApplicationsMethod = 'search'
   axios.get(`/JointPaperApplicationModelViewSet/search/`, {params}).then(res => {
       if (res.code==200){
           console.log("搜索结果：", res)       
           state.applicationList = res.data.results
           state.total = res.total
       }else{
            ElMessage.error("没有查询到记录")    
           console.log("error", res.message)
       }
   })
   .catch((error)=>{
       console.log("获取数据错误：", error)
   })
}
onMounted(() => {
   getApplicationsByDefault()
})
//设置天数
const handleCommand=(command=7)=>{
   command = parseInt(command)
   state.days = command
   getApplicationsByDefault()
}
// 同意上线
const handleAgree=(index)=>{
   console.log("申请单id:",state.applicationList[index].id )
   console.log("学案id:", state.applicationList[index].paper_info['id'])
   let params = {
        paper_id: state.applicationList[index].paper_info['id'],     
       operate: 'agree',
       days: state.days,        
   }
   axios.patch(`/GuidePaperApplicationModelViewSet/${state.applicationList[index].id}/`, params).then(res => {
       if (res.code==200){
           // console.log("申请列表：", res)
           ElMessage.success("操作成功，同意上线！")
           reGetApplication()
            scrollToTop()           
       }else if(res.code==1021){
           ElMessage.error("此操作没必要！")
        }        
       else{
            ElMessage.error("此操作没必要！")
           console.log("error", res)
       }
   })
   .catch((error)=>{
       console.log("获取数据错误：", error)
   })
}
// 拒绝上线
const handleReject=(index)=>{
   // console.log("处理拒绝")
   let params = {
        paper_id: state.applicationList[index].paper_info['id'],
       detail: state.reject_reason,
       operate: 'reject',
       days: state.days
   }
   axios.patch(`/GuidePaperApplicationModelViewSet/${state.applicationList[index].id}/`, params).then(res => {
       if (res.code==200){
           // console.log("申请列表：", res)
           ElMessage.warning("操作成功，下线！")
           reGetApplication()
            scrollToTop()
       }else if(res.code==1021){
           ElMessage.error("此操作没必要！")
       } 
       else{
           console.log("error", res)
       }
   })
   .catch((error)=>{
       console.log("获取会员激活错误：", error)
   })
}
const searchUserApplicationHandle=()=>{
   getApplicationsBySearch()
}
// 滚到顶端
const scrollToTop=()=>{
   document.querySelector('#top_position').scrollIntoView(true);
}
//点击页码时触发
const handleCurrentChange = (newPage)=>{
   state.currentPage = newPage 
   reGetApplication()
   scrollToTop()
 }
 // 根据获取方式重新获取申请表
 const reGetApplication=()=>{
    if (state.lastGetApplicationsMethod == 'default'){
       getApplicationsByDefault(0, state.days)
   }else{
       getApplicationsBySearch()
   }
 }
</script>

<style scoped>
 .search_activate {
   display: flex;
   flex-flow: row nowrap;
   /* justify-content: space-between; */
   align-items: center;
   margin: 0 auto;
   height: 30px;
 }
 .header_activate{
   display: flex;
   flex-flow: row nowrap;
   justify-content:flex-start;
   /* align-items: center; */
   padding: 0px;
   height: 30px;
   width:800px;
 }
 span{
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   font-size: medium;
 }
 .tableClass .cell{   
   padding: 0!important;
   height: 20px!important;
   line-height: 20px!important;
   text-align: center;
   font-size: 10px;
 }
</style>